<template>
    <div class="etjbxx">
      <p>创建时间：2023-03-07</p>
      <p style="float: right; margin-top: -20px;">
        <el-button
          size="small"
          style="background-color: #fff; color: rgb(0, 146, 254)"
          type="primary"
          plain
          >预览</el-button
        >
      </p>
      <p>最近更新时间：2023-03-07</p>
      <p style="text-align: center; margin-top: 15px">
        <span style="font-weight: 700; font-size: 28px; color: #000"
          >基本信息表</span
        >
      </p>
      <table class="tab_sty" cellspacing="0" style="width: 100%">
        <tr>
          <th>档案编号</th>
          <td style="width: 85%">
            <span
              v-for="(item, index) in 档案号"
              :key="index"
              :class="item == '-' ? 'no_bd' : 'yes_bd'"
              >{{ item }}</span
            >
          </td>
        </tr>
        <tr>
          <th>姓名</th>
          <td style="width: 85%;">杨远飞</td>
          <th>性别</th>
          <td>女</td>
          <th>出生日期</th>
          <td>2022年08月03日</td>
          <th>出生证号</th>
          <td style="width: 85%;">-</td>
          <th>身份证号</th>
          <td style="width: 85%">
            <span
              v-for="(item, index) in 档案号"
              :key="index"
              :class="item == '-' ? 'no_bd' : 'yes_bd'"
              >{{ item }}</span
            >
          </td>
          <th>家庭住址</th>
          <td style="width: 85%;">云南省丽江市玉龙纳西族自治县黎明傈僳族乡黎明村委会云南省丽江市玉龙县黎明乡黎明村委会别独伍组</td>
        </tr>
        <tr style="margin-top: 30px; display: inline-block">
          <th>父亲姓名</th>
          <td style="width: 85%;">雀梅胜</td>
          <th>身份证号</th>
          <td style="width: 85%">
            <span
              v-for="(item, index) in 档案号"
              :key="index"
              :class="item == '-' ? 'no_bd' : 'yes_bd'"
              >{{ item }}</span
            >
          </td>
          <th>联系电话</th>
          <td>15008793163</td>
          <th>出生日期</th>
          <td>1991年03月09日</td>
          <th>文化程度</th>
          <td style="width: 85%;">不详</td>
          <th>职业</th>
          <td style="width: 85%;">农、林、牧、渔、水利业生产人员</td>
        </tr>
        <tr style="margin-top: 30px; display: inline-block">
          <th>母亲姓名</th>
          <td style="width: 85%;">熊胜梅</td>
          <th>身份证号</th>
          <td style="width: 85%">
            <span
              v-for="(item, index) in 档案号"
              :key="index"
              :class="item == '-' ? 'no_bd' : 'yes_bd'"
              >{{ item }}</span
            >
          </td>
          <th>联系电话</th>
          <td>15008793163</td>
          <th>出生日期</th>
          <td>1991年03月09日</td>
          <th>文化程度</th>
          <td style="width: 85%;">初中</td>
          <th>职业</th>
          <td style="width: 85%;">不便分类的其他从业人员</td>
        </tr>
      </table>
      <p style="margin-top: 30px">
        旧档案号指：已在管理的纸质档案上的标准档案编号或曾使用的公卫系统里生成的标准档案编号，如果有请填入，查看随访表或打印纸质版时将以旧档案号为准；如果没有旧档案号可不填，将自动生成符合国家公卫规定的新档案编号。
      </p>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        info: {},
        options: [
          {
            value: "测试",
            label: "测试",
          },
        ],
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [
            {
              text: "今天",
              onClick(picker) {
                picker.$emit("pick", new Date());
              },
            },
          ],
        },
        value2: "",
        档案号: "530721-205-105-00293",
      };
    },
  };
  </script>
  
  <style scoped lang="scss">
  .etjbxx {
    .top {
      padding: 10px 20px;
      background-color: #e6f7ff;
      border: 1px solid #91d5ff;
    }
    .tab1 {
      tr {
        width: 100%;
        th {
          text-align: center;
          color: #000;
          background-color: rgb(250, 250, 250);
        }
        td {
          padding: 10px;
        }
      }
    }
    .box {
      padding: 10px 250px;
      background-color: rgb(250, 250, 250);
      margin: 10px 0;
    }
    .tab_sty {
      border-collapse: collapse;
      th {
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        width: 15%;
        height: 48px;
        line-height: 24px;
        padding: 10px;
        background-color: #fafafa;
        border: 1px solid rgb(217, 217, 217);
      }
      td {
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        width: 35%;
        height: 48px;
        line-height: 24px;
        padding: 10px;
        border: 1px solid rgb(217, 217, 217);
        text-align: left;
      }
      .no_bd{
        display: inline-block;
        padding: 0px 6px;
        margin: 0 3px;
      }
      .yes_bd{
        display: inline-block;
        padding: 0px 6px;
        margin: 0 3px;
        border: 1px solid #000;
      }
    }
    .no_bdb {
      td {
        border-bottom: none;
      }
    }
  }
  </style>